<template>
    <div>
        <div class="hen">
            <el-row class="hengfu">
                <el-col :span="12">
                    <el-page-header @back="goBack">
                        <template #content>
                            <el-breadcrumb-item :to="{ path: '/exam/question/addbank' }">题库管理-新增题库</el-breadcrumb-item>
                        </template>
                    </el-page-header>
                </el-col>
            </el-row>
        </div>

        <div class="tab">
            <div class="trr">
                <el-descriptions v-loading="loading" title="新增题库" :column="2" border>
                    <el-descriptions-item label="题库名称" label-align="right" align="left" label-class-name="my-label"
                        class-name="my-content" width="150px">
                        <el-input style="width: 40vh;" v-model="name" placeholder="请输入题库名称" />
                    </el-descriptions-item>
                    <el-descriptions-item width="150px" label="难度" label-align="right" align="left">
                        <el-input-number style="width: 40vh;" v-model="lv" :min="1" :max="10" />
                    </el-descriptions-item>
                    <el-descriptions-item label="标签" :span=2 label-align="right" width="150px" align="left">
                        <el-checkbox style="width: 7vh;" @change="(val) => check(val, item)"
                            v-for="(item, index) in checkList" :key="index" :label="item">
                            {{ item }}
                        </el-checkbox>
                    </el-descriptions-item>
                    <el-descriptions-item label="描述" :span=2 label-align="right" align="left">
                        <el-input v-model="explain" :rows="2" type="textarea" placeholder="题库描述" />
                    </el-descriptions-item>
                    <el-descriptions-item label="操作" label-align="right" align="left">
                        <el-button :disabled="name == '' || labels.length == 0 ? disabled = true : disabled = false" color="#0EA06F"
                            size="large" type="primary" plain @click="AddQuestion">新增试题</el-button>
                    </el-descriptions-item>
                </el-descriptions>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import type { TypeAddQusetionDto } from '../../../type/question'
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { GetLabels, AddQuestionBank } from '../../../api/question/question'
import { ElNotification } from 'element-plus'
import { useRouter } from 'vue-router';


export default defineComponent({
    setup() {
        const router = useRouter();

        const data = reactive<TypeAddQusetionDto>({
            loading: true,  // 加载屏 
            checkList: [],  //多选框
            explain: '',     //描述框  
            name: '',        //题库名
            parentid: '',    //父id
            lv: 1,           //等级
            labels: [],       //标签
            disabled: true    //是否禁用
        })

        const events = {
            goBack() {
                window.history.go(-1)
            },


            // 确认新增
            AddQuestion() {
                AddQuestionBank({
                    name: data.name,
                    labels: data.labels,
                    lv: data.lv,
                    parentid: data.parentid,
                    explain: data.explain
                }).then((res: any) => {
                    if (res.result == 0) {
                        ElNotification({
                            title: '添加成功',
                            type: 'success',
                        })
                        router.push('/exam/question')

                        console.log(res)
                    } else {
                        ElNotification({
                            title: '添加失败',
                            type: 'warning',
                        })
                    }
                })
            },

            //查询题目
            bind() {
                // data.loading = false
            },

            // 标签事件
            check(val: any, item: any) {
                if (val == false) {
                    data.labels.splice(item, 1)
                } else {
                    data.labels.push(item)
                }
            },

            // 获取标签
            GetLabel() {
                GetLabels({}).then((res: any) => {
                    if (res.result == 0) {
                        data.checkList = res.data
                        data.loading = false
                    }
                })
            }

        }

        onMounted(() => {
            events.GetLabel()
            events.bind()
        })

        return {
            ...toRefs(data),
            ...events
        }

    },
})
</script>

<style scoped>
/* 背景 */
/* .tab {
    margin-top: 2vh;
    height: 78vh;
    border: 1px solid darkgray;
    box-shadow: 0px 0px 2px rgb(188, 185, 185);
    border-radius: 5px;
} */

/* 按钮样式 */
.grid-content {
    margin: auto;
    margin-top: 2vh;
    border-radius: 5px;
    background-color: rgb(251, 251, 251);
    width: 95%;
    line-height: 45px;
    text-align: left;
    padding: 10px;
    border: 1px solid darkgray;
    box-shadow: 0px 0px 1px grey;
}

.flex {
    float: right;
    /* margin-right: 2vh; */
}

.trr {
    margin-top: 2vh;
    border-radius: 5px;
    padding: 10px;
    height: 75vh;
    background-color: rgb(251, 251, 251);
    border: 1px solid darkgray;
    box-shadow: 0px 0px 1px grey;
}
</style>
